---
title: "Cell Editing"
---

## Enable Editing

To enable Cell Editing for a Column use the `editable` property on the Column Definition.

{% apiDocumentation source="column-properties/properties.json" section="editing" names=["editable"] /%}

```{% frameworkTransform=true spaceBetweenProperties=true %}
const gridOptions = {
    columnDefs: [
        {
            field: 'athlete',
            // enables editing
            editable: true
        }
    ]
}
```

By default, the grid uses [Cell Data Types](./cell-data-types/) to provide different editors based on the type of each column. For example, string columns will use a text input, number columns will use a numeric input.

The example below shows editing enabled on all columns by setting `editable=true` on the `defaultColDef`.


{% gridExampleRunner title="Simple Cell Editing" name="simple-editing" /%}

## Conditional Editing

To dynamically determine which cells are editable, a callback function can be supplied to the `editable` property on the Column Definition:

```{% frameworkTransform=true spaceBetweenProperties=true %}
const gridOptions = {
    columnDefs: [
        {
            field: 'athlete',
            // conditionally enables editing for data for 2012
            editable: (params) => params.data.year == 2012
        }
    ],
}
```

In the snippet above, **Athlete** cells will be editable on rows where the **Year** is `2012`.

This is demonstrated in the following example, note that:

* An `editable` callback is added to the **Athlete** and **Age** columns to control which cells are editable based on the selected **Year**.
* A custom `editableColumn` [Column Type](./column-definitions/#default-column-definitions) is used to avoid duplication of the callback for **Athlete** and **Age**.
* Buttons are provided to change the **Year** used by the `editable` callback function to control which cells are editable.
* A blue [Cell Style](./cell-styles/) has been added to highlight editable cells using the same logic as the `editable` callback.

{% gridExampleRunner title="Conditional Cell Editing" name="conditional-editing" /%}

{% if isFramework("vue") %}

## Two Way Binding

If you want to have row data changes done within the grid - i.e. from the Grid back up to the parent component - then you'll need to make use of `v-model` instead of binding to `rowData`.

For example:

```jsx
<template>
    <ag-grid-vue style="width: 500px; height: 500px;"
                 @grid-ready="onGridReady"
                 :columnDefs="columnDefs"
                 v-model="rowData">
    </ag-grid-vue>
</template>
```

{% note %}
`v-model` is only possible when `ClientSideRowModel` is used, and either the `AllCommunityModule` or the `ClientSideRowModelApiModule` module is registered.
{% /note %}
{% /if %}

## Editing Events

Cell editing results in the following events.

{% apiDocumentation source="grid-events/events.json" section="editing" names=["cellValueChanged","cellEditingStarted","cellEditingStopped","rowEditingStarted","rowEditingStopped","cellEditRequest","rowValueChanged"] config={"overrideBottomMargin":"0rem", "hideMore":false} /%}

## Row Grouping and Cell Editing

For cell editing with row grouping see [Row Grouping - Editing Groups](./grouping-edit/)